import { Flex, Heading, Box, Divider } from '@chakra-ui/react';
import { appStarted } from 'store/middleware/listenerMiddleware/listeners/appStarted';
import { useAppDispatch } from 'store/storeHooks';
import { memo, useEffect } from 'react';
import SocketStatus from 'common/components/SocketStatus';
import CurrentImagePreview from 'features/gallery/components/CurrentImagePreview';
import ParamPositiveConditioning from 'features/parameters/components/ParamPositiveConditioning';
import ProcessButton from 'features/parameters/components/ProcessButton';
import ParamMainModelSelect from 'features/parameters/components/ParamMainModelSelect';
import Toaster from './Toaster';

function App() {
  const dispatch = useAppDispatch();

  useEffect(() => {
    console.log('--- app started ---');
    dispatch(appStarted());
  }, [dispatch]);

  return (
    <Box w="100vw" h="100vh" position="relative" overflow="hidden">
      <Flex flexDirection="column" gap="2" h="full">
        <Flex justify="space-between" w="full" p="2" align="center" h="16">
          <Heading>🎨 Test</Heading>
          <SocketStatus />
        </Flex>

        <Flex grow="1" p="2">
          <Flex w="340px" gap="2" px="2" flexDirection="column">
            <ParamPositiveConditioning />
            <ParamMainModelSelect />
            <ProcessButton />
          </Flex>
          <Divider orientation="vertical" />
          <Flex grow="1" h="full" px="2">
            <CurrentImagePreview />
          </Flex>
        </Flex>
      </Flex>

      <Toaster />
    </Box>
  );
}

export default memo(App);
